<template>
  <div class='container'>
    <el-dialog
      title="题目预览"
      :visible="dialogVisible"
      width="65%"
      center
      :before-close="close"
      >
    <el-header style="height:auto">
      <el-row :gutter="20">
        <el-col :span="6">【题型】：{{queDetail.questionType | questionsFilter}}</el-col>
        <el-col :span="6">【编号】：{{queDetail.id}}</el-col>
        <el-col :span="6">【难度】：{{queDetail.difficulty | difficultyFilter}}</el-col>
        <el-col :span="6">【标签】：{{queDetail.tags}}</el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">【学科】：{{queDetail.subject || '无'}}</el-col>
        <el-col :span="6">【目录】：{{queDetail.catalog}}</el-col>
        <el-col :span="6">【方向】：{{queDetail.direction}}</el-col>
      </el-row>
      <hr>
    </el-header>
    <div class="main">
      <el-row :gutter="20">
        <el-col :span="6">【题干】：
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col v-html="queDetail.question"></el-col>
      </el-row>
          <div v-if="queDetail.questionType==='1'">
            <p>单选题：</p>
            <el-form ref="form" :model="form">
              <el-form-item>
                <el-radio-group v-model="form.single">
                  <el-radio style="display:block;marginBottom:20px" v-for="item in options" :key="item.id" :label="item.id">{{item.code + '：'+item.title}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
          </div>
          <div v-if="queDetail.questionType==='2'">
            <p>多选题：</p>
            <el-form ref="form" :model="form">
              <el-form-item>
                <el-checkbox-group v-model="form.multi">
                  <el-checkbox style="display:block;marginBottom:20px" v-for="item in options" :key="item.id" :label="item.id">
                    {{item.code + '：'+item.title}}
                  </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-form>
          </div>
      <el-row :gutter="20">
        <el-col>【参考答案】：
          <el-button v-if="!videoVisible" @click="videoVisible=true" type="success">视频答案预览</el-button>
          <el-button v-else @click="videoVisible=false" type="primary">关闭视频</el-button>
          <hr v-if="videoVisible">
          <div v-if="videoVisible" class="mont">
            <video id="myVideo"
              class="video-js"
              controls
              autoplay="muted"
              preload="auto"
              style="width:100%;height:auto"
              >
              <source :src="queDetail.videoURL" type="video/mp4" >
            </video>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col>【答案解析】：<span style="display:inline-block" v-html="queDetail.answer"></span> </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col>【题目备注】：<span style="display:inline-block" v-html="queDetail.remarks"></span></el-col>
      </el-row>
    </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="close">已 阅</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      required: true
    },
    queDetail: {
      type: Object,
      required: true
    },
    options: {
      type: Array
    }
  },
  data () {
    return {
      form: {
        multi: [],
        single: ''
      },
      videoVisible: false,
      videoURL: null
    }
  },
  methods: {
    close () {
      this.videoVisible = false
      this.$emit('closePre')
    }
  }
}
</script>

<style scoped lang='scss'>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .main{
    padding:5%;
    box-sizing: border-box;
  }
  .el-col {
    border-radius: 4px;
  }</style>
